<template>
  <div class="learning-schedule">
    <h1>学习计划表</h1>
    <div class="input-section">
      <input v-model="newCourse" placeholder="课程名称" />
      <input v-model="newTime" placeholder="学习时间" />
      <button @click="addCourse">添加课程</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>课程名称</th>
          <th>学习时间</th>
          <th>完成状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(course, index) in courses" :key="index">
          <td>{{ course.name }}</td>
          <td>{{ course.time }}</td>
          <td>
            <input type="checkbox" v-model="course.completed" @change="updateCompletion(index)" />
          </td>
          <td>
            <button @click="editCourse(index)">编辑</button>
            <button @click="deleteCourse(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="statistics">
      <p>已完成课程数量: {{ completedCoursesCount }}</p>
      <p>未完成课程数量: {{ uncompletedCoursesCount }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 定义响应式数据
const newCourse = ref('');
const newTime = ref('');
const courses = ref([
  { name: '数学', time: '周一 19:00 - 21:00', completed: false },
  { name: '英语', time: '周二 20:00 - 22:00', completed: false }
]);

// 添加课程
const addCourse = () => {
  if (newCourse.value && newTime.value) {
    courses.value.push({
      name: newCourse.value,
      time: newTime.value,
      completed: false
    });
    newCourse.value = '';
    newTime.value = '';
  }
};

// 编辑课程
const editCourse = (index) => {
  const course = courses.value[index];
  newCourse.value = course.name;
  newTime.value = course.time;
  courses.value.splice(index, 1);
};

// 删除课程
const deleteCourse = (index) => {
  courses.value.splice(index, 1);
};

// 更新完成状态
const updateCompletion = (index) => {
  courses.value[index].completed = !courses.value[index].completed;
};

// 计算已完成和未完成课程数量
const completedCoursesCount = computed(() => {
  return courses.value.filter(course => course.completed).length;
});
const uncompletedCoursesCount = computed(() => {
  return courses.value.filter(course => !course.completed).length;
});
</script>

<style scoped>
.learning-schedule {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.input-section {
  margin-bottom: 20px;
}

.input-section input {
  margin-right: 10px;
  padding: 5px;
}

.input-section button {
  padding: 5px 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.statistics {
  margin-top: 20px;
}
</style>    